<!doctype html>

<html style="height:100%">
<head>
    <title>流水日志指定关键字频率统计</title>

    <script src="{{ url_for('static', filename='jquery-3.3.1.js') }}"></script>
    <script src="{{ url_for('static', filename='jquery-ui.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='jquery-ui.css') }}"/>
    <style type="text/css">
        body,input,textarea {font-family:Microsoft YaHei; font-size:100%; border-radius:5px;}
        textarea {width:98%; height:100%; resize:none;}
        table {table-layout:fixed; }
    </style>
</head>

<body style="margin:0; width:100%; height:100%; text-aglin:center; aglin:center;">
<!-- 标题 -->
<div align=center style="width:100%; height:50px; background:#003399; ">
    <table border=0 style="width:90%; height:100%; ">
        <tr>
            <td style="width:50%; text-align:left; border:0px solid; ">
                <a href="/" style="color:white; text-decoration:none; font-size:150%; ">流水日志指定关键字频率统计</a>
            </td>
        </tr>
    </table>
</div>

<!-- 正文 -->
<div style="width:90%; height:90%; margin:0 auto; text-align:center;">
    <table border="0" style="width:100%; height:100%;">
        <tr style="height:20px; ">
            <th style="width:20%; background-color:#CC0033; color: white">
                关键字（会按行分割）
            </th>
            <td rowspan="3">
                <div id="tabs" style="width:100%; height:100%">
                    <ul>
                        <li><a href="#tabs-1">在线复制粘贴</a></li>
                        <li><a href="#tabs-2">文件上传下载</a></li>
                    </ul>

                    <div id="tabs-1" style="height:90%">
                        <table border=0 style="width:100%; height:100%; text-align:center;">

                            <tr style="height:20px; background-color:#CC0033; color:white">
                                <th style="width:50%">
                                    流水日志
                                </th>
                                <th>
                                    <div id=ret_count>输出</div>
                                </th>
                            </tr>

                            <tr>
                                <td>
                                    <textarea id=log></textarea>
                                </td>
                                <td>
                                    <textarea id=ret_str style="background-color:#EBEBE4"></textarea>
                                </td>
                            </tr>

                            <!-- 尾巴 -->
                            <tr style="height:50px;">
                                <td>
                                    <input type=submit value=提交 onclick="doProcess()"/>
                                </td>
                                <td>
                                    <input type=submit value=拷贝到剪切板 onclick="doCopy()"/>
                                    <input type=submit value=导出Excel onclick="doExport()"/>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div id="tabs-2">
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <textarea id=keyword style="height:100%"></textarea>
            </td>
        </tr>

        <tr style="height:50px">
            <td>
                <div id=radio>
                    <input type="radio" id="radio1" name="type" value=single checked="checked"><label
                        for="radio1">独立统计</label>
                    <input type="radio" id="radio2" name="type" value=together><label for="radio2">一起</label>
                </div>
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript">
<!-- 标签页 -->
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

<!-- 提示框 -->
$( document ).tooltip();

<!-- 按钮 -->
$( "input[type=submit], button" )
.button()
<!-- .click(function( event ) { -->
<!-- event.preventDefault(); -->
<!-- }); -->

<!-- 单选按钮 -->
$( "#radio" ).buttonset();

<!-- 校验为空 -->
function check_null(value, alerttxt)
{
    if (value != "")
    {
        return true;
    }
    else
    {
        alert(alerttxt);
        return false;
    }
}

<!-- 处理 -->
function doProcess(){

    $.post('/doProcess', {
        keyword: $('#keyword').val(),
        type: $('#radio :checked').val(),
        log: $('#log').val(),
    },
    function (data, status) {
        if (status == 'success')
        {
            ret_json = $.parseJSON(data);

            $('#ret_count').html('输出(' + ret_json.ret_count + ')')
            $('#ret_str').val(ret_json.ret_str)
        }
        else
        {
            $('#ret_count').html('输出(' + status + ')')
        }

    })
}

<!-- 输入框，回车 -->
function keyDown()
{
    if(event.keyCode==13)
    {
        doProcess();
    }
}

<!-- 拷贝 -->
function doCopy()
{
    var widget = $("#ret_str")
    widget.focus();
    widget.select();
    document.execCommand("Copy");
    alert("已复制至剪切板");
}

<!-- 重置 -->
function doReset()
{
    $("#reg").val("")
    $("#content").val("")
    $("#ret_str").val("")
}





</script>
</body>
</html>
